<template>
  <div class="map">
    <bd-map :options="options" @loaded="mapLoaded" />
    <div class="action">
      <button @click="onClick">标准地图</button>
      <button @click="onImgClick(1)">卫星地图1</button>
      <button @click="onImgClick(2)">卫星地图2</button>
      <button @click="onImgClick(3)">卫星地图3</button>
    </div>
  </div>
</template>

<script>
import BdMap from '@/components/index';

export default {
  name: 'demo-example',
  components: { BdMap },
  data() {
    return {
      options: {
        ak: '',
        lng: '121.506379',
        lat: '31.245414',
        zoom: 15,
        minZoom: 1,
        maxZoom: 25,
        style: '204feadb68dde39c92ebbed5dfdb78b5',
        useTilesLoaded: true,
        enableCluster: true,
      },
    };
  },
  methods: {
    /**
     * @description: 地图加载完成
     * @param {*} map
     * @return {*}
     */
    mapLoaded(map) {
      this.map = map;
      map.setReset([121.506379, 31.245414], 12.1);
    },

    onClick() {
      this.map.closeSatelliteLayer();
    },

    onImgClick(type) {
      this.map.openSatelliteLayer(type);
    },
  },
};
</script>

<style scoped>
.map {
  position: relative;
  width: 100%;
  height: 100%;
}

.action {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 999;
}
</style>
